<template>
    <div class="step-main"
        v-loading="loading"
        element-loading-text="桌面加載中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)">
        <div class="step-main-content">
            <div class="step-left" v-if="projectType != 2 && projectType != 1" :style="{left: leftData + 'px'}">
                <div class="set-box">
                    <button @click="settingFn" v-if="editorOrAdd"><i class="iconfont icon-icon-test-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy"></i></button>
                </div>
                <div class="step-left-content" :class="{ active: activeData}">
                    <div class="step-left-flow">
                        <div class="flow-item" v-for="(item, index) in dynamicValidateForm.domains" :class="{ active: editorOrAdd && stepActiveIndex == index}">
                            <span class="item-point"></span>
                            <span class="item-line" v-if="(dynamicValidateForm.domains.length-1) != index || !editorOrAdd"></span>
                            <div class="item-add" v-if="(dynamicValidateForm.domains.length-1) == index && !editorOrAdd" @click="addDomain">
                                <i class="iconfont icon-add"></i>
                            </div>
                        </div>
                    </div>
                    <div class="step-left-text">
                        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
                            <el-form-item
                                v-for="(domain, index) in dynamicValidateForm.domains"
                                :key="domain.key"
                                :prop="'domains.' + index + '.value'"
                                :rules="{
                                required: true, message: '标题不能为空', trigger: 'blur'
                                }"
                            >
                                <span v-if="editorOrAdd" :class="{ active: editorOrAdd && stepActiveIndex == index}">{{ domain.value }}</span>
                                <el-input v-if="editorOrAdd == false" type="textarea" style="resize:none;" v-model="domain.value"></el-input>
                                <div v-if="editorOrAdd == false && dynamicValidateForm.domains.length>1" class="text-delete"  @click.prevent="removeDomain(domain)"><i class="iconfont icon-jianhao"></i></div>
                            </el-form-item>
                            <el-form-item v-if="editorOrAdd == false" class="save-position">
                                <div class="save-btn" @click="saveForm('dynamicValidateForm')">
                                    <i class="iconfont icon-baocun1"></i>保存
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="arrow-btn" @click="arrowFn" :class="{ active: activeData}">
                    <img src="./../../assets/images/arrow_left_icon.png" />
                </div>
            </div>
            <div class="step-left" v-if="projectType == 1" :style="{left: leftData + 'px'}">
                <div class="step-left-content" :class="{ active: activeData}">
                    <div class="step-left-flow">
                        <div class="flow-item" v-for="(item, index) in dynamicValidateForm.domains" :class="{ active: editorOrAdd && stepActiveIndex == index}">
                            <span class="item-point"></span>
                            <span class="item-line" v-if="(dynamicValidateForm.domains.length-1) != index || !editorOrAdd"></span>
                            <div class="item-add" v-if="(dynamicValidateForm.domains.length-1) == index && !editorOrAdd" @click="addDomain">
                                <i class="iconfont icon-add"></i>
                            </div>
                        </div>
                    </div>
                    <div class="step-left-text">
                        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm">
                            <el-form-item
                                v-for="(domain, index) in dynamicValidateForm.domains"
                                :key="domain.key"
                                :prop="'domains.' + index + '.value'"
                                :rules="{
                                required: true, message: '标题不能为空', trigger: 'blur'
                                }"
                            >
                                <span v-if="editorOrAdd" :class="{ active: editorOrAdd && stepActiveIndex == index}">{{ domain.value }}</span>
                                <el-input v-if="editorOrAdd == false" type="textarea" style="resize:none;" v-model="domain.value"></el-input>
                                <div v-if="editorOrAdd == false && dynamicValidateForm.domains.length>1" class="text-delete"  @click.prevent="removeDomain(domain)"><i class="iconfont icon-jianhao"></i></div>
                            </el-form-item>
                            <el-form-item v-if="editorOrAdd == false" class="save-position">
                                <div class="save-btn" @click="saveForm('dynamicValidateForm')">
                                    <i class="iconfont icon-baocun1"></i>保存
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="arrow-btn" @click="arrowFn" :class="{ active: activeData}">
                    <img src="./../../assets/images/arrow_left_icon.png" />
                </div>
            </div>
            <div class="step-right" v-if="projectType == 2">
                <div class="right-title">
                    案例名称
                </div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item>
                        <div class="step-right-form-title">
                            <i class="iconfont icon-mubiao1"></i>案例目标
                        </div>
                        <span class="step-right-form-text">{{ ruleForm.traget }}</span>
                    </el-form-item>
                </el-form>
            </div>
            <div class="step-right" v-if="projectType == 1">
                <div class="right-title">
                    案例名称
                </div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item>
                        <div class="step-right-form-title">
                            <i class="iconfont icon-mubiao1"></i>案例目标
                        </div>
                        <span class="step-right-form-text">{{ ruleForm.traget }}</span>
                    </el-form-item>
                    <el-form-item>
                        <div class="step-right-form-title">
                            <i class="iconfont icon-shujuyuan"></i>步骤源码
                        </div>
                        <div class="upload-text-box">
                            <div class="upload-text-tip"  v-if="uploadFile == ''">暂无源码</div>
                            <div class="upload-text-tip"  v-else>{{uploadFile}}</div>
                            <i class="iconfont icon-xiazai" v-if="uploadFile != ''"></i>
                            <el-switch
                                v-model="switchValue"
                                active-color="#5281c6"
                                inactive-color="#000"
                                v-if="uploadFile != ''">
                            </el-switch>
                        </div>
                    </el-form-item>
                    <el-form-item class="step-right-form-tips" v-if="tipsStatus">
                        <div class="tips-box">
                            <img src="./../../assets/images/tips.png" />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="step-right-form-title">
                            <i class="iconfont icon-anli"></i>步骤说明
                        </div>
                        <vue-editor v-model="htmlForEditor" :editorToolbar="customToolbar"></vue-editor>
                    </el-form-item>
                    <el-form-item class="save-position">
                        <el-button v-if="editorOrAdd && stepActiveIndex > 0" type="primary"  @click="pageFn(-1)">上一页</el-button>
                        <el-button v-if="editorOrAdd" type="primary" @click="pageFn(1)">下一页</el-button>
                    </el-form-item>
                </el-form>
                <!-- <div class="step-right-success">
                    <i class="iconfont icon-baocunchenggong"></i>
                    <p>保存成功</p>
                    <button>返回</button>
                </div> -->
            </div>
            <div class="step-right" v-if="projectType != 2 && projectType != 1">
                <div class="step-breadcrumb" v-show="fangdaStatus">
                    <div class="step-breadcrumb-icon">
                        <i class="iconfont icon-anli"></i>
                    </div>
                    <span>用户预购行为大数据分析</span>
                    <!-- <span> > 阅读性相关性</span> -->
                    <div class="triangle-right"></div>
                </div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                    <el-form-item  v-show="fangdaStatus">
                        <div class="step-right-form-title">
                            <i class="iconfont icon-mubiao1"></i>案例目标
                        </div>
                        <span class="step-right-form-text">{{ ruleForm.traget }}</span>
                    </el-form-item>
                    <el-form-item v-show="!tipsStatus && fangdaStatus">
                        <div class="step-right-form-title">
                            <i class="iconfont icon-shujuyuan"></i>步骤源码
                        </div>
                        <div class="upload-btn-box" v-if="uploadFile == ''">
                            <img src="./../../assets/images/upload_icon2.png" /> 仅支持zip格式上传
                            <input type="file" multiple="multiple" auto-complete="off" @change="getFile"></input>
                        </div>
                        <div class="upload-text-box" v-if="uploadFile != ''">
                            <span>{{ uploadFile }}</span>
                            <i class="iconfont icon-shanchu2" @click="deleteUploadFile"></i>
                            <i class="iconfont icon-tihuan2"><input type="file" multiple="multiple" auto-complete="off" @change="getFile" title="重新上传"></input></i>
                        </div>
                    </el-form-item>
                    <el-form-item class="step-right-form-tips" v-if="tipsStatus">
                        <div class="tips-box">
                            <img src="./../../assets/images/tips.png" />
                        </div>
                    </el-form-item>
                    <el-form-item v-if="!tipsStatus">
                        <div class="step-right-form-title">
                            <i class="iconfont icon-anli"></i>步骤说明
                            <div class="title-btn-box" @click="bigEditor">
                                <i class="iconfont icon-fangda" v-if="fangdaStatus"></i>
                                <i class="iconfont icon-suoxiao1" v-if="!fangdaStatus"></i>
                            </div>
                            <el-button type="primary" @click="submitForm">保存</el-button>
                        </div>
                        <vue-editor v-model="htmlForEditor" :editorToolbar="customToolbar"></vue-editor>
                    </el-form-item>
                    <el-form-item class="save-position">
                        <el-button v-if="editorOrAdd && stepActiveIndex > 0" type="primary"  @click="pageFn(-1)">上一页</el-button>
                        <el-button v-if="editorOrAdd && dynamicValidateForm.domains.length>1" type="primary"  @click="pageFn(1)">下一页</el-button>
                    </el-form-item>
                </el-form>
                <!-- <div class="step-right-success">
                    <i class="iconfont icon-baocunchenggong"></i>
                    <p>保存成功</p>
                    <button>返回</button>
                </div> -->
            </div>
        </div>
        <div class="step-main-mirror">
            <div class="mirror-iframe">
                <iframe :src="desktopUrl" width="100%" :height="iframeHeight" frameborder="0"></iframe>
            </div>
            <div class="step-main-mirror-dialog" :style="{right: mirrorRightData + 'px'}">
                <div class="mirror-dialog-item">
                    <div class="item-btn" v-if="vmButton.refreshFlag" @click="initDesktop(nodeIndex)">
                        <i class="iconfont icon-refresh"></i>刷新
                    </div>
                     <div class="item-btn" v-if="vmButton.replaceFlag" @click="replaceVirtual(0)">
                        <i class="iconfont icon-55"></i>虚机替换
                    </div>
                    <div class="item-btn" v-if="vmButton.choiceImageFlag && itemServiceType == 2" @click="selectConfig">
                        <i class="iconfont icon-zhongxinxuanze"></i>重新选择配置
                    </div>
                    <div class="item-btn" v-if="vmButton.saveImageFlag && itemServiceType == 2" @click="saveCisualizationFn">
                        <i class="iconfont icon-suoshuqiyefenhubaocunchenggong"></i>镜像保存
                    </div>
                </div>
                <div class="mirror-dialog-item">
                   <div class="item-btn" v-if="vmButton.fileDownloadFlag && itemServiceType == 1">
                        <a :href="'/dataplatform/container/download?chapterId='+chapterId">
                            <i class="iconfont icon-unie122"></i>文件下載
                        </a>
                    </div>
                    <div class="item-btn" v-if="vmButton.choiceImageFlag" @click="selectConfig">
                        <i class="iconfont icon-zhongxinxuanze"></i>SFTP工具
                    </div>
                    <div class="item-btn" v-if="vmButton.clipboardFlag" @click="cutFn">
                        <i class="iconfont icon-jianqieban"></i>剪切板
                    </div>
                </div>
                <div class="mirror-dialog-item">
                    <div class="item-btn" v-if="vmButton.openShareFlag && itemServiceType == 1" @click="shareFn">
                        <i class="iconfont icon-fenxiang"></i>分享桌面
                    </div>
                    <div class="item-btn" v-if="vmButton.closeShareFlag && itemServiceType == 1" @click="closeShareFn">
                        <i class="iconfont icon-guanbifenxiang"></i>关闭分享
                    </div>
                </div>
                <div class="mirror-dialog-item last-item">
                    <div class="item-btn" v-for="(item, index) in desktopBtnList">
                        <span v-if="item.clusterRole == 0">
                            <i class="iconfont icon-SliceCopy"></i>单节点
                        </span>
                        <span v-else-if="item.clusterRole == 1"  @click="deskTopChange(index)">
                            <i class="iconfont icon-SliceCopy"></i>主节点
                        </span>
                        <span v-else @click="deskTopChange(index)">
                            <i class="iconfont icon-SliceCopy"></i>从节点{{index}}
                        </span>
                    </div>
                </div>
                <div class="mirror-dialog-btn">
                    <button @click="outFn">退出<i class="iconfont icon-tuichu"></i></button>
                </div>
            </div>
            <div class="step-main-mirror-arrow" :style="{right: mirrorArrowData + 'px'}" @click="mirrorArrowFn">
                <span :class="{active:mirrorActiveData}"></span>
            </div>
        </div>
        <el-dialog class="add-virtual-dialog" title="选择配置" :visible.sync="dialogFormVisible" width='500px'>
            <el-form :model="form" :rules="rules2" ref="form" label-width="130px">
                <el-form-item label="类型 :">
                    <el-radio-group v-model="form.radioType">
                        <el-radio :label="0">单节点</el-radio>
                        <el-radio :label="1">集群</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div>
                    <el-form-item v-if="form.radioType == 0" label="镜像名称 :" prop="mirrorValue">
                        <el-select
                            v-model="form.mirrorValue"
                            placeholder="请选择镜像"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.mirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="form.radioType == 0" label="虚机配置 :" prop="virtualValue">
                        <el-select
                            v-model="form.virtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.virtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <el-form-item v-if="form.radioType == 1" label="从节点数 :">
                    <div class="virtual-step">
                        <ul>
                            <li v-for="(item, index) in form.virtualStepList" @click="addClass(((index+1)*2))" :class="{ active:((index+1)*2) == form.virtualStepCurrent}">{{item.value}}</li>
                        </ul>
                    </div>
                </el-form-item>
                <div class="item-node" v-if="form.radioType == 1">
                    <el-form-item
                        style="width:270px; float:left;"
                        label="主节点(master):"
                        prop="masterMirrorValue"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.masterMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.masterMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        style="width:150px; float:left; margin-left:10px;"
                        prop="masterVirtualValue"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        label-width="0"
                        >
                        <el-select
                            v-model="form.masterVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.masterVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="item-node" v-if="form.radioType == 1">
                    <el-form-item
                        v-if="form.virtualStepCurrent == 2 || form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave1):"
                        :prop="'formDomains.' + 0 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[0].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[0].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 2 || form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 0 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[0].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[0].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 2 || form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave2):"
                        :prop="'formDomains.' + 1 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[1].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[1].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 2 || form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 1 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[1].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[1].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave3):"
                        :prop="'formDomains.' + 2 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[2].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[2].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 2 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[2].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[2].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave4):"
                        :prop="'formDomains.' + 3 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[3].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[3].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 4 || form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 3 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[3].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[3].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave5):"
                        :prop="'formDomains.' + 4 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[4].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[4].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 4 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[4].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[4].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 6"
                        style="width:270px; float:left;"
                        label="从节点(slave6):"
                        :prop="'formDomains.' + 5 + '.formMirrorValue'"
                        :rules="{
                            required: true, message: '请选择镜像配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[5].formMirrorValue"
                            placeholder="请选择镜像配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[5].formMirrorStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        v-if="form.virtualStepCurrent == 6"
                        style="width:150px; float:left; margin-left:10px;"
                        :prop="'formDomains.' + 5 + '.formVirtualValue'"
                        label-width="0"
                        :rules="{
                            required: true, message: '请选择虚机配置', trigger: 'blur'
                        }"
                        >
                        <el-select
                            v-model="form.formDomains[5].formVirtualValue"
                            placeholder="请选择虚机配置"
                            value-key="value"
                            style="float:left;">
                            <el-option
                            v-for="item in form.formDomains[5].formVirtualStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button type="primary" @click="saveSubmitForm('form')">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog class="virtual-tool-dialog" title="可视化工具" :visible.sync="visualizationDialog">
            <div class="virtual-tool-tab">
                <ul>
                    <li :class="{ active: visualization.activeIndex == 1}" @click="tabClick(1)">
                        <span>新建可视化工具</span>
                    </li>
                    <li :class="{ active: visualization.activeIndex == 2}" @click="tabClick(2)">
                        <span>历史记录</span>
                    </li>
                </ul>
            </div>
            <div class="virtual-tool-content" v-if="visualization.activeIndex == 1 && visualization.selectStatus">
                <div class="virtual-tool-step">
                    <div class="step-box">
                        <div class="step-item" :class="{ active: visualization.stepActiveIndex == 1}">
                            <div class="item-header">
                                <span class="item-point"></span>
                                <span class="item-line"></span>
                            </div>
                            <div class="item-text">
                                <span>步骤1</span>
                            </div>
                        </div>
                        <div class="step-item" :class="{ active: visualization.stepActiveIndex == 2}">
                            <div class="item-header">
                                <span class="item-point"></span>
                                <span class="item-line"></span>
                            </div>
                            <div class="item-text">
                                <span>步骤2</span>
                            </div>
                        </div>
                        <div class="step-item" :class="{ active: visualization.stepActiveIndex == 3}">
                            <div class="item-header">
                                <span class="item-point"></span>
                            </div>
                            <div class="item-text">
                                <span>步骤3</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="virtual-tool-step-content" v-if="visualization.stepActiveIndex == 1">
                    <div class="virtual-tool-select-box">
                        <div class="virtual-tool-select-item">
                            <span class="search-title">选择库表: </span>
                            <el-select
                                v-model="visualization.tableValue"
                                placeholder="请选择库表"
                                value-key="value"
                                style="float:left;"
                                @change="visualizationSelectChange">
                                <el-option
                                v-for="item in visualization.tableStatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="virtual-tool-table">
                        <div class="virtual-tool-table-box">
                            <table>
                                <thead>
                                    <tr>
                                        <td v-for="(item, index) in visualization.tableListData.tableData" :key="index">{{ item }}</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item, index) in visualization.tableListData.data" :key="index">
                                        <td v-for="(item2, index2) in item" :key="index2"><div>{{ item2 }}</div></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="virtual-tool-step-content" v-if="visualization.stepActiveIndex == 2">
                    <div class="content-left">
                        <div class="step-content-title">选择图表库</div>
                        <div class="content-left-tab">
                            <span v-for="(item, index) in visualization.tabData" @click="visualizationTabActiveFn(index+1)" :class="{ active: visualization.tabActiveIndex == (index+1) }">
                                {{ item.value }}
                            </span>
                        </div>
                        <div class="content-left-echarts-box">
                            <img v-if="visualization.tabActiveIndex == 1" style="margin:25px 0 0 15px;" src="./../../assets/images/echarts_img1.png" />
                            <img v-if="visualization.tabActiveIndex == 2" style="margin:25px 0 0 15px;" src="./../../assets/images/echarts_img2.png" />
                            <img v-if="visualization.tabActiveIndex == 3" style="margin:10px 0 0 35px;" src="./../../assets/images/echarts_img3.png" />
                            <img v-if="visualization.tabActiveIndex == 4" style="margin:10px 0 0 35px;" src="./../../assets/images/echarts_img4.png" />
                            <img v-if="visualization.tabActiveIndex == 5" style="margin:10px 0 0 35px;" src="./../../assets/images/echarts_img6.png" />
                            <img v-if="visualization.tabActiveIndex == 6" style="margin:35px 0 0 35px;" src="./../../assets/images/echarts_img7.png" />
                            <img v-if="visualization.tabActiveIndex == 7" style="margin:35px 0 0 10px;" src="./../../assets/images/echarts_img8.png" />
                            <img v-if="visualization.tabActiveIndex == 8" style="margin:10px 0 0 25px;" src="./../../assets/images/echarts_img9.png" />
                        </div>
                    </div>
                    <div class="content-right">
                        <div class="step-content-title">选择属性值</div>
                        <div class="step-right-content-form">
                            <el-form :model="visualization.virtualValidateForm" ref="visualization.virtualValidateForm" label-width="60px" class="demo-dynamic">
                                <el-form-item class="step-right-item" label="数值" v-if="visualization.tabActiveIndex != 2">
                                    <el-select
                                        v-model="visualization.virtualValidateForm.numberValue"
                                        placeholder="请选择数值"
                                        value-key="value"
                                        multiple
                                        collapse-tags
                                        style="float:left;">
                                        <el-option
                                        v-for="item in visualization.virtualValidateForm.numberStatus"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item class="step-right-item3" label="X轴" v-if="visualization.tabActiveIndex == 2">
                                    <el-select
                                        v-model="visualization.virtualValidateForm.xAxisValue"
                                        placeholder="请选择X轴"
                                        value-key="value">
                                        <el-option
                                        v-for="item in visualization.virtualValidateForm.xAxisStatus"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item class="step-right-item3" label="Y轴" v-if="visualization.tabActiveIndex == 2">
                                    <el-select
                                        v-model="visualization.virtualValidateForm.yAxisValue"
                                        placeholder="请选择Y轴"
                                        value-key="value">
                                        <el-option
                                        v-for="item in visualization.virtualValidateForm.yAxisStatus"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item class="step-right-item" label="类别">
                                    <el-select
                                        v-model="visualization.virtualValidateForm.typeValue"
                                        placeholder="请选择类别"
                                        value-key="value"
                                        multiple
                                        collapse-tags
                                        style="float:left;">
                                        <el-option
                                        v-for="item in visualization.virtualValidateForm.typeStatus"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <span class="type-tips" v-if="visualization.tabActiveIndex == 2">
                                        <i class="iconfont icon-icon-question"></i>
                                        类别为图中的点
                                    </span>
                                </el-form-item>
                                <el-form-item
                                    class="step-right-item2"
                                    v-for="(domain, index) in visualization.virtualValidateForm.domains"
                                    :label="index == 0 ? '筛选' : ''"
                                    :key="domain.key"
                                >
                                    <el-select
                                        v-model="domain.fieldValue"
                                        placeholder="请选择字段"
                                        value-key="value">
                                        <el-option
                                            v-for="item in domain.fieldStatus"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-select
                                        v-model="domain.symbolValue"
                                        placeholder="请选择符号"
                                        value-key="value">
                                        <el-option
                                            v-for="item in domain.symbolStatus"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-input :disabled="domain.symbolValue=='is null' || domain.symbolValue == 'is not null'" v-model="domain.number" placeholder="请输入数值"></el-input>
                                    <el-select
                                        v-model="domain.characterValue"
                                        placeholder="请选择符号"
                                        value-key="value">
                                        <el-option
                                            v-for="item in domain.characterStatus"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                    <el-button v-if="visualization.virtualValidateForm.domains.length != 1" @click.prevent="virtualRemoveDomain(domain)">删除</el-button>
                                </el-form-item>
                                <el-form-item class="step-right-item-add">
                                    <el-button @click="visualizationAddDomain">+</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
                <div class="virtual-tool-step-content" v-if="visualization.stepActiveIndex == 3">
                    <div class="virtual-tool-step-echarts-box">
                        <div class="virtual-tool-step-echarts-left">
                            <div class="virtual-tool-step-echarts-left-table">
                                <table>
                                    <thead>
                                        <tr>
                                            <td v-for="(item, index) in visualization.stepTableListData.tableData" :key="index">{{ item }}</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(item, index) in visualization.stepTableListData.data" :key="index">
                                            <td v-for="(item2, index2) in item" :key="index2"><div>{{ item2 }}</div></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <pie-echart :id="'category-echarts'" :data="visualization.options" :type="''" v-if="visualization.tabActiveIndex != 9" style="height:360px; margin-top: 20px;"></pie-echart>
                        </div>
                        <div class="virtual-tool-step-echarts-right">
                            <div class="item">
                                <span>数值：</span>
                                <p>{{ visualization.conditionValue }}</p>
                            </div>
                            <div class="item">
                                <span>类别：</span>
                                <p>{{ visualization.conditionType }}</p>
                            </div>
                            <div class="item">
                                <span>筛选：</span>
                                <p>{{ visualization.conditionFilter }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="virtual-tool-step-btn">
                    <el-button type="primary" v-if="visualization.stepActiveIndex == 3" @click="visualizationStepFn">保存</el-button>
                    <el-button type="primary" @click="virtualPageFn(1)">下一步</el-button>
                    <el-button type="primary" @click="virtualPageFn(-1)">上一步</el-button>
                </div>
            </div>
            <!-- <div class="virtual-tool-content" v-else>
                请去虚拟机中创建
            </div> -->
            <div class="virtual-tool-content" v-if="visualization.activeIndex == 2">
                <div class="history-search-box">
                    <div class="search-item">
                        <span class="search-title">案例名称: </span>
                        <el-select
                            v-model="visualization.projectValue"
                            placeholder="请选择案例名称"
                            value-key="value"
                            @change="projectChange">
                            <el-option
                            v-for="item in visualization.projectStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <span class="search-title">可视化工具名称: </span>
                        <el-select
                            v-model="visualization.projectToolValue"
                            placeholder="请选择图形类别"
                            value-key="value">
                            <el-option
                            v-for="item in visualization.projectToolStatus"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="search-item">
                        <el-button type="primary" @click="visualizationHistorysearchFn">搜索</el-button>
                    </div>
                </div>
                <div class="history-content">
                    <div class="history-content-tips" v-if="visualization.historyListTable.length == 0">
                        请搜索您要查看的历史记录
                    </div>
                    <div class="history-content-box">
                        <div class="history-content-left">
                            <img :src="visualization.historyImgUrl" v-if="visualization.historyImgUrl != ''" />
                            <div class="history-content-list" v-if="visualization.historyListTable.length > 0">
                                <table>
                                    <thead>
                                        <tr v-for="(item, index) in visualization.historyListTable" :key="index" v-if="index == 0">
                                            <td v-for="(item2, index2) in item" :key="index2">
                                                {{ item2 }}
                                            </td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(item, index) in visualization.historyListTable" :key="index" v-if="index > 0">
                                            <td v-for="(item2, index2) in item" :key="index2">
                                                {{ item2 }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- <pie-echart :id="'category-echarts'" :data="visualization.options" style="height:200px; margin-top: 20px;"></pie-echart> -->
                        </div>
                        <div class="history-content-right" v-if="visualization.historyImgUrl != '' || visualization.historyListTable.length > 0">
                            <div class="item">
                                <span>数值：</span>
                                <p>{{ visualization.conditionValue }}</p>
                            </div>
                            <div class="item">
                                <span>类别：</span>
                                <p>{{ visualization.conditionType }}</p>
                            </div>
                            <div class="item">
                                <span>筛选：</span>
                                <p>{{ visualization.conditionFilter }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <el-dialog class="cut-dialog" title="剪切板" :visible.sync="cutDialogVisible">
            <div class="cut-title">
                <p><span>复制外部内容到实验环境内 : </span>粘贴内容到下方输入框一点击保存</p>
            </div>
            <el-form :model="cutData.cutRuleForm" :rules="cutData.cutRules" ref="cutRuleForm">
                <el-form-item prop="desc">
                    <el-input type="textarea" v-model="cutData.cutRuleForm.desc" style="height:100px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="cutSubmitForm('ruleForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog class="share-dialog" title="分享桌面" :visible.sync="shareDialogVisible" width="500px">
            <el-form :model="shareData.shareRuleForm" :rules="shareData.shareRule" ref="shareRuleForm">
                <el-form-item label="教师">
                    <el-select
                        v-model="shareData.shareRuleForm.teacherValue"
                        multiple
                        collapse-tags
                        style="float:left;"
                        placeholder="请选择教师">
                        <el-option
                        v-for="item in shareData.shareRuleForm.teacherStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学生">
                    <el-select
                        v-model="shareData.shareRuleForm.studentValue"
                        multiple
                        collapse-tags
                        style="float:left;"
                        placeholder="请选择学生">
                        <el-option
                        v-for="item in shareData.shareRuleForm.studentStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="允许对方操作">
                    <el-radio-group v-model="shareData.shareRuleForm.resource">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item style="text-align:center;">
                    <el-button type="primary" @click="shareSubmitForm('shareRuleForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog class="save-dialog" title="保存" :visible.sync="saveDialogVisible">
            <el-form :model="saveData.saveForm" :rules="saveData.saveRules" ref="saveForm" label-width="100px">
                <el-form-item label="是否覆盖">
                    <el-radio-group v-model="saveData.saveForm.resource">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="镜像名称" prop="name" v-if="saveData.saveForm.resource == 2">
                    <el-input v-model="saveData.saveForm.name" style="width:200px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveVisualizationForm('saveForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import { VueEditor } from 'vue2-editor'
    import pieEchart from './../../components/pieEchart.vue'
    export default {
        components: {
            VueEditor,
            pieEchart
        },
        data() {
            return {
                userId: '',
                //章节ID
                chapterId: '',
                //websockt地址
                projectAccessUrl: '',
                //导航类型
                itemServiceType: '',
                //案例类型1预置2自定义
                projectType: '',
                projectId: '',
                loading: false,
                //节点index
                nodeIndex: 0,
                activeData: true,
                leftData: -200,
                editorOrAdd: '',
                stepActiveIndex: 0,
                stepId: '',
                stepItemId: '',
                tipsStatus: '',
                dynamicValidateForm: {
                    domains: [{
                        id: 0,
                        value: ''
                    }]
                },
                //左侧源码
                uploadFile: '',
                switchValue: '',
                htmlForEditor: '',
                customToolbar: [
                    ["bold", "bolditalic","underline"],
                    ['link', 'image', 'blockquote', 'code-block'],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }]
                ],
                // saveSuccessStatus: false,
                fangdaStatus: true,
                //左侧编辑form
                ruleForm: {
                    traget: ''
                },
                rules: {
                },
                vmButton: '',
                desktopBtnList: [],
                desktopId: 1,
                mirrorRightData: -150,
                mirrorArrowData: 0,
                mirrorActiveData: false,
                desktopUrl: '',
                iframeHeight: '',
                dialogFormVisible: false,
                form: {
                    radioType: 0,
                    mirrorStatus: [],
                    mirrorValue:'',
                    virtualStatus: [],
                    virtualValue: '',
                    virtualStepList: [
                        { value: 2 },
                        { value: 4 },
                        { value: 6 }
                    ],
                    virtualStepCurrent: 2,
                    masterMirrorStatus: [], //主节点
                    masterMirrorValue: '',
                    masterVirtualStatus: [],
                    masterVirtualValue: '',
                    formDomains: [
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        },
                        {
                            formMirrorStatus: [],
                            formMirrorValue: '',
                            formVirtualStatus: [],
                            formVirtualValue: ''
                        }
                    ]
                },
                //表单验证
				rules2: {
                    mirrorValue: [
                        { required: true, message: '请选择镜像', trigger: 'blur' }
                    ],
                    virtualValue: [
                        { required: true, message: '请选择虚机配置', trigger: 'blur' }
                    ]
                },
                //可视化工具
                visualizationDialog: false,
                //可视化工具数据
                visualization: {
                    activeIndex: 1,
                    selectStatus: true,
                    tableStatus: [],
                    tableValue: '',
                    tableListData: '',
                    stepActiveIndex: 1,
                    tabData: [
                        {
                            type: 'line',
                            value: '折线图'
                        },
                        {
                            type: 'scatter',
                            value: '散点图'
                        },
                        {
                            type: 'radar',
                            value: '雷达图'
                        },
                        {
                            type: 'pie',
                            value: '环形图'
                        },
                        {
                            type: 'bar',
                            value: '柱状图'
                        },
                        {
                            type: 'bar',
                            value: '横向柱状图'
                        },
                        {
                            type: 'pie',
                            value: '饼图'
                        },
                        {
                            type: 'table',
                            value: '表格'
                        }
                    ],
                    tabActiveIndex: 1,
                    stepTableListData: '',
                    virtualValidateForm: {
                        numberStatus: [
                        ],
                        numberValue: [],
                        typeStatus: [
                        ],
                        typeValue: [],
                        xAxisStatus: [],
                        xAxisValue: '',
                        yAxisStatus: [],
                        yAxisValue: '',
                        domains: [
                            {
                                name: '筛选',
                                fieldStatus: [],
                                fieldValue: '',
                                symbolStatus: [
                                    {
                                        value: '=',
                                        label: '等于'
                                    },
                                    {
                                        value: '!=',
                                        label: '不等于'
                                    },
                                    {
                                        value: '<',
                                        label: '小于'
                                    },
                                    {
                                        value: '<=',
                                        label: '小于或等于'
                                    },
                                    {
                                        value: '>',
                                        label: '大于'
                                    },
                                    {
                                        value: '>=',
                                        label: '大于或等于'
                                    },
                                    {
                                        value: 'like',
                                        label: '包含'
                                    },
                                    {
                                        value: 'not like',
                                        label: '不包含'
                                    },
                                    {
                                        value: 'is null',
                                        label: '是null'
                                    },
                                    {
                                        value: 'is not null',
                                        label: '不是null'
                                    },
                                    {
                                        value: 'in',
                                        label: '在列表中'
                                    },
                                    {
                                        value: 'not in',
                                        label: '不在列表中'
                                    }
                                ],
                                symbolValue:'',
                                number: '',
                                characterStatus: [
                                    {
                                        value: ' ',
                                        label: '空'
                                    },
                                    {
                                        value: 'and',
                                        label: '并且'
                                    },
                                    {
                                        value: 'or',
                                        label: '或者'
                                    },
                                    {
                                        value: 'and not',
                                        label: '并且不'
                                    },
                                    {
                                        value: 'or not',
                                        label: '或者不'
                                    }
                                ],
                                characterValue: ''
                            }
                        ]
                    },
                    options: {},
                    projectStatus: [],
                    projectValue: '',
                    projectToolStatus: [],
                    projectToolValue: '',
                    historyListTable: [],
                    historyImgUrl: '',
                    conditionValue: '',
                    conditionType: '',
                    conditionFilter: ''
                },
                //剪切板
                cutDialogVisible: false,
                cutData: {
                    cutRuleForm: {
                        desc: ''
                    },
                    cutRules: {
                        desc: [
                            { required: true, message: '请填写内容', trigger: 'blur' }
                        ]
                    }
                },
                //分享桌面
                shareDialogVisible: false,
                shareData: {
                    shareRuleForm: {
                        teacherStatus: [],
                        teacherValue: [],
                        studentStatus: [],
                        studentValue: [],
                        resource: 1
                    },
                    shareRule: {
                        studentValue: [
                            { required: true, message: '请选择学生', trigger: 'change' }
                        ],
                        teacherValue: [
                            { required: true, message: '请选择教师', trigger: 'change' }
                        ]
                    }
                },
                //保存
                saveDialogVisible: false,
                saveData: {
                    saveForm: {
                        resource: 1,
                        name: ''
                    },
                    saveRules: {
                        name: [
                            { required: true, message: '请填写镜像名称', trigger: 'blur' }
                        ]
                    }
                },
                longTimewebsock: null,
                websock: null,
                over: null,
                longTimeOver: null
            }
        },
        destroyed: function() {
　　　　    //页面销毁时关闭长连接
            if(this.itemServiceType == 1){
                this.longTimeOver()
            }
            this.over()
        },
        created () {
            this.chapterId = this.$store.state.chapterType
            this.itemServiceType = this.$store.state.itemServiceType
            this.projectAccessUrl = JSON.parse(window.localStorage.getItem('access-user')).projectAccessUrl
            this.projectId = JSON.parse(window.localStorage.getItem('teacher-project-id')).itemId
            this.projectType = JSON.parse(window.localStorage.getItem('teacher-project-id')).type
            this.userId = JSON.parse(window.localStorage.getItem('access-user')).id
            this.init()   //初始化
            this.initDesktop(0)  //初始化进入桌面
            this.$nextTick(function () {
                this.iframeHeight = $('body').height()
                if(this.projectType == 1){
                    $('.ql-toolbar').hide()
                    $('.ql-container').css('border','none')
                }
            })
            if(this.itemServiceType == 2){
                this.initSelect()   //初始化select
            }
            //通知
            this.initWebSocket();
        },
        methods: {
            initWebSocket(){
                const wsuri = "ws://"+this.projectAccessUrl+"/dataplatform/webSocket/desktop/"+this.userId+'/'+this.projectId;
                this.websock = new WebSocket(wsuri);
                this.websock.onopen = this.websocketonopen;
                this.websock.onmessage = this.websocketonmessage;
                this.over = () => {
                    this.websock.close()
                }
            },
            websocketonopen(){
                console.log('open sucess')
            },
            websocketonmessage(e){ //数据接收
                const redata = JSON.parse(e.data);
                console.log(redata)
            },
            init(){
                let self = this
                if(self.projectType == 1 || self.projectType == 2){
                    self.itemServiceType == 1
                }else{
                    self.itemServiceType == 2
                }
                self.$http.get('/dataplatform/chapter/step/chapterStepData?chapterId='+self.chapterId+'&itemServiceType='+self.itemServiceType).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.ruleForm.traget = res.data.chapterVO.target
                        self.vmButton = res.data.vmButton
                        self.tipsStatus = true
                        self.editorOrAdd = false
                        if(res.data.stepList.list.length > 0){
                            self.stepId = res.data.stepList.list[0].id
                            self.stepSaveId = res.data.stepList.list[0].id
                            self.editorOrAdd = true
                            self.tipsStatus = false
                            self.dynamicValidateForm.domains = []
                            for (let i = 0; i < res.data.stepList.list.length; i++) {
                                let listJson = {}
                                listJson.id = res.data.stepList.list[i].id
                                listJson.value = res.data.stepList.list[i].name
                                self.dynamicValidateForm.domains.push(listJson)
                            }
                            self.editorInit()   //編輯器初始化
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //初始化select
            initSelect(){
                let self = this
                self.$http.post('/dataplatform/manage/vmConfig/vmConfigDropDownList').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        //镜像
                        for(let i = 0; i < res.data.imageDropDownList.length; i++){
                            let mirrorJson = {}
                            mirrorJson.label = res.data.imageDropDownList[i].value
                            mirrorJson.value = res.data.imageDropDownList[i].key
                            self.form.mirrorStatus.push(mirrorJson)         //单节点镜像
                            self.form.masterMirrorStatus.push(mirrorJson)   //主节点镜像
                            for (let j = 0; j < self.form.formDomains.length; j++) {
                                self.form.formDomains[j].formMirrorStatus.push(mirrorJson)
                            }
                        }
                        //虚机
                        for(let i = 0; i < res.data.hostDropDownList.length; i++){
                            let virtuaJson = {}
                            virtuaJson.label = res.data.hostDropDownList[i].value
                            virtuaJson.value = res.data.hostDropDownList[i].key
                            self.form.virtualStatus.push(virtuaJson)        //单节点虚机
                            self.form.masterVirtualStatus.push(virtuaJson)  //主节点虚机
                            for (let j = 0; j < self.form.formDomains.length; j++) {
                                self.form.formDomains[j].formVirtualStatus.push(virtuaJson)
                            }
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },

            editorInit(){
                let self = this
                self.$http.get('/dataplatform/chapter/step/detail?id='+self.stepId+'&itemServiceType=2').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.codeName != null){
                            self.uploadFile = res.data.codeName
                        }
                        self.htmlForEditor = res.data.instructions
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //初始化进入桌面
            initDesktop(index){
                let self = this
                self.loading = true
                self.desktopUrl = ''
                self.desktopId = ''
                let path
                if(self.itemServiceType == 1){
                    path = '/dataplatform/container/desktop?experimentId='+self.projectId+'&chapterId='+self.chapterId
                }else if(self.itemServiceType == 2){
                    path = '/dataplatform/image/desktop?experimentId='+self.projectId
                }
                self.$http.get(path).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(self.itemServiceType == 1){
                            self.longTimeInitWebSocket()
                        }
                        self.loading = false
                        self.desktopBtnList = res.data.desktopList
                        self.desktopUrl = res.data.desktopList[index].desktopUrl
                        self.desktopId = res.data.desktopList[index].containerId
                        self.nodeIndex = index
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.loading = false
                        self.$message.error(res.message)
                    }
                })
            },
            longTimeInitWebSocket(){ //初始化weosocket
                const wsuri = "ws://"+this.projectAccessUrl+"/dataplatform/saveExperimentTime/"+this.userId+'/'+this.projectId;
                this.longTimewebsock = new WebSocket(wsuri);
                this.longTimewebsock.onmessage = this.longTimeInitWebsocketonmessage;
                this.longTimeOver = () => {
                    this.longTimewebsock.close()
                }
            },
            longTimeInitWebsocketonmessage(e){ //数据接收
                console.log(e.data)
            },
            //镜像切换
            deskTopChange(index){
                let self = this
                self.initDesktop(index)
            },
            //可视化工具
            visualizationFn(){
                let self = this
                self.visualization.tableStatus = []
                self.$http.get('/dataplatform/visualizationTool/getTableName?containerId='+self.desktopId).then(response =>{
                    let res = response.data
                    if(res.code == '200'){
                        for (let i = 0; i < res.data.length; i++) {
                            let tableJson = {}
                            tableJson.label = res.data[i]
                            tableJson.value = res.data[i]
                            self.visualization.tableStatus.push(tableJson)
                        }
                        self.visualization.tableValue = res.data[0]
                        self.visualizationTable()
                        self.visualizationHistory()
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
                //初始化弹窗
                self.visualization.activeIndex = 1
                self.visualization.stepActiveIndex = 1
                self.visualization.tableValue = ''
                self.visualization.tabActiveIndex = 1
                self.visualization.virtualValidateForm.numberValue = []
                self.visualization.virtualValidateForm.typeValue = []
                self.visualization.virtualValidateForm.xAxisValue = []
                self.visualization.virtualValidateForm.yAxisValue = []
                self.visualization.virtualValidateForm.domains = [
                    {
                        name: '筛选',
                        fieldStatus: [],
                        fieldValue: '',
                        symbolStatus: [
                            {
                                value: '=',
                                label: '等于'
                            },
                            {
                                value: '!=',
                                label: '不等于'
                            },
                            {
                                value: '<',
                                label: '小于'
                            },
                            {
                                value: '<=',
                                label: '小于或等于'
                            },
                            {
                                value: '>',
                                label: '大于'
                            },
                            {
                                value: '>=',
                                label: '大于或等于'
                            },
                            {
                                value: 'like',
                                label: '包含'
                            },
                            {
                                value: 'not like',
                                label: '不包含'
                            },
                            {
                                value: 'is null',
                                label: '是null'
                            },
                            {
                                value: 'is not null',
                                label: '不是null'
                            },
                            {
                                value: 'in',
                                label: '在列表中'
                            },
                            {
                                value: 'not in',
                                label: '不在列表中'
                            }
                        ],
                        symbolValue:'',
                        number: '',
                        characterStatus: [
                            {
                                value: ' ',
                                label: '空'
                            },
                            {
                                value: 'and',
                                label: '并且'
                            },
                            {
                                value: 'or',
                                label: '或者'
                            },
                            {
                                value: 'and not',
                                label: '并且不'
                            },
                            {
                                value: 'or not',
                                label: '或者不'
                            }
                        ],
                        characterValue: ''
                    }
                ]
                self.visualizationDialog = true
            },
            //可视化工具表格
            visualizationTable(){
                let self = this
                self.$http.get('/dataplatform/visualizationTool/getTableData?tableName='+self.visualization.tableValue+'&containerId='+self.desktopId).then(response =>{
                    let res = response.data
                    if(res.code == '200'){
                        self.visualization.tableListData = res.data
                        self.visualization.virtualValidateForm.domains[0].fieldStatus = []
                        self.visualization.virtualValidateForm.numberStatus = []
                        self.visualization.virtualValidateForm.typeStatus = []
                        self.visualization.virtualValidateForm.domains[0].fieldValue = ''
                        self.visualization.virtualValidateForm.numberValue = []
                        self.visualization.virtualValidateForm.typeValue = []
                        self.visualization.virtualValidateForm.xAxisStatus = []
                        self.visualization.virtualValidateForm.xAxisValue = ''
                        self.visualization.virtualValidateForm.yAxisStatus = []
                        self.visualization.virtualValidateForm.yAxisValue = ''
                        for (let i = 0; i < res.data.tableData.length; i++) {
                            let tableJson = {}
                            tableJson.label = res.data.tableData[i]
                            tableJson.value = res.data.tableData[i]
                            self.visualization.virtualValidateForm.domains[0].fieldStatus.push(tableJson)
                            self.visualization.virtualValidateForm.numberStatus.push(tableJson)
                            self.visualization.virtualValidateForm.typeStatus.push(tableJson)
                            self.visualization.virtualValidateForm.xAxisStatus.push(tableJson)
                            self.visualization.virtualValidateForm.yAxisStatus.push(tableJson)
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //可视化工具历史记录案例名称select切换
            projectChange(){
                //可视化工具名称
                this.visualization.projectToolStatus = []
                this.visualization.projectToolValue = ''
                this.visualizationHistoryTool()
            },
            //可视化工具历史记录
            visualizationHistory(){
                let self = this
                self.visualization.projectStatus = []
                self.$http.get('/dataplatform/visualizationTool/search/itemNames').then(response =>{
                    let res = response.data
                    if(res.code == '200'){
                        for(let i = 0; i < res.data.length; i++){
                            let projectJson = {}
                            projectJson.label = res.data[i].name
                            projectJson.value = res.data[i].id
                            self.visualization.projectStatus.push(projectJson)
                        }
                        self.visualization.projectValue = res.data[0].id
                        //可视化工具名称
                        self.visualizationHistoryTool()
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            visualizationHistoryTool(){
                let self = this
                self.visualization.projectToolStatus = []
                self.$http.get('/dataplatform/visualizationTool/search/name?itemId='+self.visualization.projectValue).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        for (let i = 0; i < res.data.length; i++) {
                            let projectJson = {}
                            projectJson.label = res.data[i].name
                            projectJson.value = res.data[i].id
                            self.visualization.projectToolStatus.push(projectJson)
                        }
                        self.visualization.projectToolValue = res.data[0].id
                        self.visualizationHistorysearchFn()
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //可视化工具历史记录搜索
            visualizationHistorysearchFn(){
                let self = this
                self.visualization.historyListTable = []
                self.visualization.historyImgUrl = ''
                self.$http.get('/dataplatform/visualizationTool/detail?id='+self.visualization.projectToolValue+'&containerId='+self.desktopId).then(response =>{
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.showEchartsFlag){
                           self.visualization.historyImgUrl = res.data.picUrl
                           self.visualization.historyListTable = []
                        }else{
                            self.visualization.historyListTable = res.data.list
                            self.visualization.historyImgUrl = ''
                        }
                    historyImgUrl: ''
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //可视化工具select切换表格
            visualizationSelectChange(){
                this.visualizationTable()
            },
            //可视化工具选择图标库
            visualizationTabActiveFn(index){
                let self = this
                self.visualization.tabActiveIndex = index
                self.visualization.virtualValidateForm.numberValue = []
                self.visualization.virtualValidateForm.typeValue = []
                self.visualization.virtualValidateForm.xAxisValue = ''
                self.visualization.virtualValidateForm.yAxisValue = ''
                self.visualization.virtualValidateForm.domains = [
                    {
                        name: '筛选',
                        fieldStatus: self.visualization.virtualValidateForm.domains[0].fieldStatus,
                        fieldValue: '',
                        symbolStatus: [
                            {
                                value: '=',
                                label: '等于'
                            },
                            {
                                value: '!=',
                                label: '不等于'
                            },
                            {
                                value: '<',
                                label: '小于'
                            },
                            {
                                value: '<=',
                                label: '小于或等于'
                            },
                            {
                                value: '>',
                                label: '大于'
                            },
                            {
                                value: '>=',
                                label: '大于或等于'
                            },
                            {
                                value: 'like',
                                label: '包含'
                            },
                            {
                                value: 'not like',
                                label: '不包含'
                            },
                            {
                                value: 'is null',
                                label: '是null'
                            },
                            {
                                value: 'is not null',
                                label: '不是null'
                            },
                            {
                                value: 'in',
                                label: '在列表中'
                            },
                            {
                                value: 'not in',
                                label: '不在列表中'
                            }
                        ],
                        symbolValue:'',
                        number: '',
                        characterStatus: [
                            {
                                value: ' ',
                                label: '空'
                            },
                            {
                                value: 'and',
                                label: '并且'
                            },
                            {
                                value: 'or',
                                label: '或者'
                            },
                            {
                                value: 'and not',
                                label: '并且不'
                            },
                            {
                                value: 'or not',
                                label: '或者不'
                            }
                        ],
                        characterValue: ''
                    }
                ]
            },
            //剪切板
            cutFn(){
                this.cutDialogVisible = true
            },
            //分享桌面
            shareFn(){
                let self = this
                self.shareData.shareRuleForm.teacherStatus = []
                self.shareData.shareRuleForm.teacherValue = []
                self.shareData.shareRuleForm.studentStatus = []
                self.shareData.shareRuleForm.studentValue = []
                self.$http.get('/dataplatform/container/share/user/list?experimentId='+self.projectId).then(response => {
                    let res = response.data
                    if(res.code == '200'){

                        for (let i = 0; i < res.data.teacherList.length; i++) {
                            let teacherJson = {}
                            teacherJson.label = res.data.teacherList[i].username
                            teacherJson.value = res.data.teacherList[i].stuorteaId
                            self.shareData.shareRuleForm.teacherStatus.push(teacherJson)
                        }
                        for (let i = 0; i < res.data.studentList.length; i++) {
                            let studentJson = {}
                            studentJson.label = res.data.studentList[i].username
                            studentJson.value = res.data.studentList[i].stuorteaId
                            self.shareData.shareRuleForm.studentStatus.push(studentJson)
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
                this.shareDialogVisible = true
            },
            shareSubmitForm(formName){
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.$http.post('/dataplatform/container/share/start',{
                            containerId: self.desktopId,
                            controllable: self.shareData.shareRuleForm.resource,
                            studentAndTeacher: {
                                teacherList: self.shareData.shareRuleForm.teacherValue,
                                studentList: self.shareData.shareRuleForm.studentValue
                            }
                        }).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                self.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                self.shareDialogVisible = false
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //关闭分享
            closeShareFn(){
                let self = this
                self.$confirm('是否关闭分享?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.$http.get('/dataplatform/container/share/stop?containerId='+self.desktopId).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                type: 'success',
                                message: '关闭成功!'
                            })
                        }else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    })

                }).catch(() => {
                })
            },
            //保存鏡像
            saveCisualizationFn(){
                this.saveDialogVisible = true
            },
            //保存镜像
            saveVisualizationForm(formName){
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = {}
                        if(self.saveData.saveForm.resource == 1){
                            data = {
                                containerId: self.desktopId
                            }
                        }else{
                            data = {
                                imageName: self.saveData.saveForm.name,
                                containerId: self.desktopId
                            }
                        }
                        self.$http.post('/dataplatform/image/save',data).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                self.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                self.saveDialogVisible = false
                                self.$refs[formName].resetFields()
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            //菜单动画
            arrowFn() {
                if(this.leftData == -200){
                    this.leftData = 0
                    this.activeData = false
                }else{
                    this.leftData = -200
                    this.activeData = true
                }
            },
            //右侧菜单动画
            mirrorArrowFn(){
                if(this.mirrorRightData == -150){
                    this.mirrorRightData = 0
                    this.mirrorArrowData = 150
                    this.mirrorActiveData = true
                }else{
                    this.mirrorRightData = -150
                    this.mirrorArrowData = 0
                    this.mirrorActiveData = false
                }
            },
            //设置步骤
            settingFn(){
                for(let i = 0; i < this.dynamicValidateForm.domains.length; i++){
                    if(this.dynamicValidateForm.domains[i].value == ''){
                        this.$message.error('请填写步骤')
                        return;
                    }
                }
                if(this.editorOrAdd == false){
                    this.editorOrAdd = true
                }else{
                    this.editorOrAdd = false
                }
            },
            //移除dom
            removeDomain(item) {
                var index = this.dynamicValidateForm.domains.indexOf(item)
                if (index !== -1) {
                    this.dynamicValidateForm.domains.splice(index, 1)
                }
            },
            //添加dom
            addDomain() {
                this.dynamicValidateForm.domains.push({
                    value: '',
                    id: 0,
                    key: Date.now()
                });
            },
            //step表单提交
            saveForm(formName) {
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let stepList = []
                        for (let i = 0; i < self.dynamicValidateForm.domains.length; i++) {
                            let stepJson = {}
                            stepJson.id = self.dynamicValidateForm.domains[i].id
                            stepJson.name = self.dynamicValidateForm.domains[i].value
                            stepList.push(stepJson)
                        }
                        self.$http.post('/dataplatform/chapter/step/updateStepName',{
                            chapterId: self.chapterId,
                            stepList: stepList
                        }).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                self.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                self.editorOrAdd = true
                                self.init()
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //翻頁
            pageFn(page){
                let self = this
                if(page == 1){
                    if(self.stepActiveIndex == (self.dynamicValidateForm.domains.length - 1)){
                        self.stepActiveIndex = 0
                        self.stepId = self.dynamicValidateForm.domains[self.dynamicValidateForm.domains.length - 1].id
                        self.stepSaveId = self.dynamicValidateForm.domains[0].id
                    }else{
                        self.stepActiveIndex = self.stepActiveIndex+1
                        self.stepId = self.dynamicValidateForm.domains[self.stepActiveIndex - 1].id
                        self.stepSaveId = self.dynamicValidateForm.domains[self.stepActiveIndex].id
                    }
                }else if(page == -1){
                    if(self.stepActiveIndex - 1 == 0){
                        self.stepActiveIndex = 0
                        self.stepId = self.dynamicValidateForm.domains[1].id
                        self.stepSaveId = self.dynamicValidateForm.domains[0].id
                    }else{
                        self.stepActiveIndex = self.stepActiveIndex - 1
                        self.stepId = self.dynamicValidateForm.domains[self.stepActiveIndex+1].id
                        self.stepSaveId = self.dynamicValidateForm.domains[self.stepActiveIndex].id
                    }

                }
                self.$http.post('/dataplatform/chapter/step/updateAndGetStep',{
                    tabType: page,
                    id: self.stepId,
                    itemServiceType: 2,
                    instructions: self.htmlForEditor,
                    name: self.ruleForm.name,
                    target: self.ruleForm.desc
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.htmlForEditor = res.data.instructions
                        self.uploadFile = res.data.codeName == null ? '' : res.data.codeName
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //表单提交
            submitForm() {
                let self = this
                self.stepItemId = self.dynamicValidateForm.domains[self.stepActiveIndex].id
                self.$http.post('/dataplatform/chapter/step/updateAndGetStep',{
                    tabType: 0,
                    id: self.stepSaveId,
                    itemServiceType: 2,
                    instructions: self.htmlForEditor
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        // self.saveSuccessStatus = true
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //放大缩小editor
            bigEditor(){
                if(this.fangdaStatus == true){
                    this.fangdaStatus = false
                    $('.ql-editor').css({'max-height':'500px', 'height':'800px'})
                }else{
                    this.fangdaStatus = true
                    $('.ql-editor').css({'max-height':'300px', 'height':'800px'})
                }
            },
            //弹窗step切换
            addClass:function(index){
                this.form.virtualStepCurrent = index
            },
            //重新选择配置
            selectConfig(){
                let self = this
                self.$http.get('/dataplatform/manage/vmConfig/configDetails?projectId='+self.projectId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.isCluster == 0){
                            self.form.radioType = res.data.isCluster
                            self.form.mirrorValue = res.data.mainImageId
                            self.form.virtualValue = res.data.mainHostId
                            for(let i = 0; i < self.form.formDomains.length; i++){
                                self.form.formDomains[i].formMirrorValue = ''
                                self.form.formDomains[i].formVirtualValue = ''
                            }
                            self.form.virtualStepCurrent = 2
                        }else if(res.data.isCluster == 1){
                            self.form.radioType = res.data.isCluster
                            self.form.masterMirrorValue = res.data.mainImageId
                            self.form.masterVirtualValue = res.data.mainHostId
                            self.form.virtualStepCurrent = res.data.cluster.length
                            for(let i = 0; i < item.cluster.length; i++){
                                self.form.formDomains[i].formMirrorValue = res.data.cluster[i].imageId
                                self.form.formDomains[i].formVirtualValue = res.data.cluster[i].hostId
                            }
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
                this.dialogFormVisible = true
            },
            //保存配置表單提交
            saveSubmitForm(formName){
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = {}
                        if(self.form.radioType == 0){
                            data = {
                                projectId: self.projectId,
                                isCluster: self.form.radioType,
                                mainImageId: self.form.mirrorValue,
                                mainHostId: self.form.virtualValue
                            }
                        }else if(self.form.radioType == 1){
                            let cluterArr = []
                            let formDomains = self.form.formDomains.slice(0,self.form.virtualStepCurrent)
                            for(let i = 0; i < formDomains.length; i++){
                                let clusterJson = {}
                                clusterJson.imageId = formDomains[i].formMirrorValue
                                clusterJson.hostId = formDomains[i].formVirtualValue
                                cluterArr.push(clusterJson)
                            }
                            data = {
                                projectId: self.projectId,
                                isCluster: self.form.radioType,
                                mainImageId: self.form.masterMirrorValue,
                                mainHostId: self.form.masterVirtualValue,
                                cluster: cluterArr
                            }
                        }
                        self.$http.post('/dataplatform/image/repick',data).then((response) => {
                            let res = response.data
                            if(res.code == '200'){
                                self.$message({
                                    message: '重新选择成功',
                                    type: 'success'
                                })
                                self.dialogFormVisible = false
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //可视化工具弹窗tab切换
            tabClick(value){
                this.visualization.activeIndex = value
                this.visualization.stepActiveIndex = 1
            },
            //可视化工具弹窗翻页
            virtualPageFn(page){
                let self = this
                if(page == 1){
                    if(self.visualization.stepActiveIndex < 3){
                        if(self.visualization.stepActiveIndex == 2){
                            self.stepEchartsShowFn()
                        }
                        self.visualization.stepActiveIndex = self.visualization.stepActiveIndex+1
                    }
                }else{
                    if(self.visualization.stepActiveIndex > 1){
                        self.visualization.stepActiveIndex = self.visualization.stepActiveIndex-1
                    }
                }
            },
            //可视化工具步骤保存
            visualizationStepFn(){
                let dataUrl
                if(document.getElementById('category-echarts')){
                    dataUrl = document.getElementById('category-echarts').getAttribute('dataUrl')
                }else{
                    dataUrl = ''
                }
                let self = this
                let imgType = []
                if(self.visualization.tabActiveIndex == 2){
                    imgType[0] = self.visualization.virtualValidateForm.xAxisValue
                    imgType[1] = self.visualization.virtualValidateForm.yAxisValue
                }
                let infoData = [
                    {
                        typeList: self.visualization.virtualValidateForm.typeValue,
                        valueList: self.visualization.tabActiveIndex == 2 ? imgType : self.visualization.virtualValidateForm.numberValue,
                        tableNames: [self.visualization.tableValue],
                        filterConditionsSymbol: [],
                        filterConditions: []
                    }
                ]
                for (let i = 0; i < self.visualization.virtualValidateForm.domains.length; i++) {
                    infoData[0].filterConditionsSymbol.push(self.visualization.virtualValidateForm.domains[i].characterValue)
                    infoData[0].filterConditions.push(self.visualization.virtualValidateForm.domains[i].fieldValue+' '+self.visualization.virtualValidateForm.domains[i].symbolValue+' '+self.visualization.virtualValidateForm.domains[i].number)
                }
                self.$http.post('/dataplatform/visualizationTool/create',{
                    base64Info: dataUrl,
                    containerId: self.desktopId,
                    itemId: self.projectId,
                    info: infoData,
                    type: self.visualization.tabActiveIndex
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        self.visualizationDialog = false
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //生成echarts
            stepEchartsShowFn(){
                let self = this
                let imgType = []
                if(self.visualization.tabActiveIndex == 2){
                    imgType[0] = self.visualization.virtualValidateForm.xAxisValue
                    imgType[1] = self.visualization.virtualValidateForm.yAxisValue
                }
                let infoData = [
                    {
                        typeList: self.visualization.virtualValidateForm.typeValue,
                        valueList: self.visualization.tabActiveIndex == 2 ? imgType : self.visualization.virtualValidateForm.numberValue,
                        tableNames: [self.visualization.tableValue],
                        filterConditionsSymbol: [],
                        filterConditions: []
                    }
                ]
                for (let i = 0; i < self.visualization.virtualValidateForm.domains.length; i++) {
                    infoData[0].filterConditionsSymbol.push(self.visualization.virtualValidateForm.domains[i].characterValue)
                    infoData[0].filterConditions.push(self.visualization.virtualValidateForm.domains[i].fieldValue+' '+self.visualization.virtualValidateForm.domains[i].symbolValue+' '+self.visualization.virtualValidateForm.domains[i].number)
                }
                self.$http.post('/dataplatform/visualizationTool/getEchartsData',{
                    containerId: self.desktopId,
                    info: infoData,
                    type: self.visualization.tabActiveIndex
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        //self.visualization.tabActiveIndex 1：折线图 2：散点图 3：雷达图 4：环形图 5：漏斗图 6：柱状图 7：横向柱状图 8：饼图 9：列表
                        self.visualization.stepTableListData = []
                        if(self.visualization.tabActiveIndex == 1){
                            let xAxisData = []
                            let seriesData = []
                            for (let i = 0; i < res.data.echartsList[0].echartsVOList.length; i++) {
                                xAxisData.push(res.data.echartsList[0].echartsVOList[i].name)
                                seriesData.push(res.data.echartsList[0].echartsVOList[i].value)
                            }
                            self.visualization.options = {
                                animation : false,
                                xAxis: {
                                    type: 'category',
                                    data: xAxisData
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        data: seriesData,
                                        type: 'line',
                                        smooth: false
                                    }
                                ]
                            }
                        }else if(self.visualization.tabActiveIndex == 2){
                            let seriesData = []
                            for (let i = 0; i < res.data.echartsList[0].echartsVOList.length; i++) {
                                let seriesChilderData = []
                                seriesChilderData.push(res.data.echartsList[0].echartsVOList[i].value)
                                seriesChilderData.push(res.data.echartsList[0].echartsVOList[i].name)
                                seriesData.push(seriesChilderData)
                            }
                            self.visualization.options = {
                                animation : false,
                                xAxis: {
                                    splitLine: {
                                        show: false
                                    }
                                },
                                yAxis: {
                                    splitLine: {
                                        show: false
                                    }
                                },
                                series: [
                                    {
                                        symbolSize: 5,
                                        data: seriesData,
                                        type: 'scatter'
                                    }
                                ]
                            }
                        }else if(self.visualization.tabActiveIndex == 3){
                            let indicatorData = [], seriesData = [ { 'value': [] } ]
                            for (let i = 0; i < res.data.echartsList[0].echartsVOList.length; i++) {
                                let indicatorDataJson = {}
                                indicatorDataJson.name = res.data.echartsList[0].echartsVOList[i].name
                                indicatorDataJson.max = res.data.echartsList[0].echartsVOList[i].maxValue
                                seriesData[0].value.push(res.data.echartsList[0].echartsVOList[i].value)
                                indicatorData.push(indicatorDataJson)
                            }
                            self.visualization.options = {
                                animation : false,
                                radar: {
                                    name: {
                                        textStyle: {
                                            color: '#fff',
                                            backgroundColor: '#999',
                                            borderRadius: 3,
                                            padding: [3, 5]
                                    }
                                    },
                                    indicator: indicatorData
                                },
                                series: [{
                                    type: 'radar',
                                    data : seriesData
                                }]
                            }
                        }else if(self.visualization.tabActiveIndex == 4){
                            let seriesData = []
                            for (let i = 0; i < res.data.echartsList[0].echartsVOList.length; i++) {
                                let seriesChilderJson = {}
                                seriesChilderJson.value = res.data.echartsList[0].echartsVOList[i].value
                                seriesChilderJson.name = res.data.echartsList[0].echartsVOList[i].name
                                seriesData.push(seriesChilderJson)
                            }
                            self.visualization.options = {
                                animation : false,
                                tooltip: {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                                },
                                series: [
                                    {
                                        name:'访问来源',
                                        type:'pie',
                                        selectedMode: 'single',
                                        radius: ['50%', '70%'],

                                        label: {
                                            normal: {
                                                position: 'inner'
                                            }
                                        },
                                        labelLine: {
                                            normal: {
                                                show: false
                                            }
                                        },
                                        data: seriesData
                                    }
                                ]
                            }
                        }else if(self.visualization.tabActiveIndex == 5){
                            let xAxisData = []
                            let seriesData = []
                            for (let i = 0; i < res.data.echartsList[0].echartsVOList.length; i++) {
                                xAxisData.push(res.data.echartsList[0].echartsVOList[i].name)
                                seriesData.push(res.data.echartsList[0].echartsVOList[i].value)
                            }
                            self.visualization.options = {
                                 xAxis: {
                                    type: 'category',
                                    data: xAxisData
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [{
                                    data: seriesData,
                                    type: 'bar'
                                }]
                            }
                        }else if(self.visualization.tabActiveIndex == 6){
                            let yAxisData = []
                            let seriesData = []
                            let seriesLabel = {
                                normal: {
                                    show: true,
                                    textBorderColor: '#333',
                                    textBorderWidth: 2
                                }
                            }
                            for (let i = 0; i < res.data.echartsList.length; i++) {
                                let seriesDataJson = {}
                                seriesDataJson.name = res.data.echartsList[i].remark
                                seriesDataJson.type = 'bar'
                                seriesDataJson.label = seriesLabel
                                seriesDataJson.data = []
                                for (let j = 0; j < res.data.echartsList[i].echartsVOList.length; j++) {
                                    seriesDataJson.data.push(res.data.echartsList[i].echartsVOList[j].name)
                                    if(i == 0){
                                        yAxisData.push(res.data.echartsList[0].echartsVOList[j].value)
                                    }
                                }
                                seriesData.push(seriesDataJson)
                            }
                            console.log(yAxisData)
                            self.visualization.options = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    }
                                },
                                grid: {
                                    left: 100
                                },
                                xAxis: {
                                    type: 'value',
                                    name: 'Days',
                                    axisLabel: {
                                        formatter: '{value}'
                                    }
                                },
                                yAxis: {
                                    type: 'category',
                                    inverse: true,
                                    data: yAxisData
                                },
                                series: seriesData
                            }
                        }else if(self.visualization.tabActiveIndex == 7){
                            let seriesData = []
                            for (let i = 0; i < res.data.echartsList[0].echartsVOList.length; i++) {
                                let seriesChilderJson = {}
                                seriesChilderJson.value = res.data.echartsList[0].echartsVOList[i].value
                                seriesChilderJson.name = res.data.echartsList[0].echartsVOList[i].name
                                seriesData.push(seriesChilderJson)
                            }
                            self.visualization.options = {
                                tooltip : {
                                    trigger: 'item',
                                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                                },
                                series : [
                                    {
                                        name: '访问来源',
                                        type: 'pie',
                                        radius : '75%',
                                        center: ['50%', '60%'],
                                        data: seriesData,
                                        itemStyle: {
                                            emphasis: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }
                                ]
                            }
                        }else if(self.visualization.tabActiveIndex == 8){
                            self.visualization.stepTableListData = res.data.list
                        }
                        self.visualization.conditionValue = res.data.conditionList[0].value
                        self.visualization.conditionType = res.data.conditionList[0].type
                        self.visualization.conditionFilter= res.data.conditionList[0].filterConditaion
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            virtualRemoveDomain(item) {
                // if(this.visualization.virtualValidateForm.domains.length == 1){
                //     self.$message.error('')
                // }
                var index = this.visualization.virtualValidateForm.domains.indexOf(item)
                    if (index !== -1) {
                    this.visualization.virtualValidateForm.domains.splice(index, 1)
                }
            },
            visualizationAddDomain() {
                let self = this
                if(self.visualization.virtualValidateForm.domains.length == 0){
                    self.visualization.virtualValidateForm.domains.push({
                        fieldStatus: self.visualization.virtualValidateForm.domains[0].fieldStatus,
                        fieldValue: '',
                        symbolStatus: self.visualization.virtualValidateForm.domains[0].symbolStatus,
                        symbolValue:'',
                        number: '',
                        characterStatus: self.visualization.virtualValidateForm.domains[0].characterStatus,
                        characterValue: '',
                        key: Date.now()
                    })
                }else{
                    self.visualization.virtualValidateForm.domains.push({
                        fieldStatus: self.visualization.virtualValidateForm.domains[0].fieldStatus,
                        fieldValue: '',
                        symbolStatus: self.visualization.virtualValidateForm.domains[0].symbolStatus,
                        symbolValue:'',
                        number: '',
                        characterStatus: self.visualization.virtualValidateForm.domains[0].characterStatus,
                        characterValue: '',
                        key: Date.now()
                    })
                }
            },
            //剪切板表单提交
            cutSubmitForm(formName) {
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        self.$http.post('/dataplatform/container/clipboard',{
                            containerId: self.desktopId,
                            content: self.cutData.cutRuleForm.desc
                        }).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                self.$message({
                                    type: 'success',
                                    message: '保存成功!'
                                })
                                self.cutDialogVisible = false
                            }else if(res.code == '401'){
                                self.$router.replace({
                                    path:'/login'
                                })
                            }else{
                                self.$message.error(res.message)
                            }
                        })
                    }
                })
            },
            //替换虚拟机
            replaceVirtual(index) {
                let self = this
                self.$confirm('替换虚拟机会丢失文件、数据，确定要替换虚拟机吗?', '替换虚拟机', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let path
                    if(self.itemServiceType == 1){
                        path = '/dataplatform/container/replace?experimentId='+self.projectId
                    }else if(self.itemServiceType == 2){
                        path = '/dataplatform/image/replace?containerId='+self.desktopId
                    }
                    self.loading = true
                    self.desktopBtnList = ''
                    self.$http.get(path).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.loading = false
                            self.$message({
                                type: 'success',
                                message: '替换成功!'
                            })
                            self.desktopBtnList = res.data.desktopList
                            self.desktopUrl = res.data.desktopList[index].desktopUrl
                            self.desktopId = res.data.desktopList[index].containerId
                        }else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(() => {
                })
            },
            //上传文件
            getFile($event) {
                let self = this
                let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(!isLt2M){
                    self.$message.error('上传文件大小不能超过 500MB!')
                    return false
                }
                if(fileType != 'zip'){
                    self.$message.error('请上传zip格式的文件!')
                    return false
                }
                let fd = new FormData()
                    fd.append('files', $event.target.files[0])
                const loading = this.$loading({
                    lock: true,
                    text: '正在上传中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.post('/dataplatform/common/upload/file',fd, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {
                    let res = response.data

                    if(res.code == '200'){
                        loading.close()
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        self.uploadFile = res.data[0].fileName
                        self.updateStepCode()
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        loading.close()
                        self.$message.error(res.message)
                    }
                })
            },
            //删除上传的源码
            deleteUploadFile(){
                let self = this
                self.$confirm('是否删除?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    self.updateStepCode(1)
                }).catch(() => {});
            },
            //type==1代表删除上传源码
            updateStepCode(type){
                let self = this
                let data = {}
                if(type == 1){
                    data = {
                        id: self.stepSaveId,
                        codeName: ''
                    }
                }else{
                    data = {
                        id: self.stepSaveId,
                        codeName: self.uploadFile
                    }
                }
                self.$http.post('/dataplatform/chapter/step/updateStepCode', data).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(type == 1){
                            self.uploadFile = ''
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                        }
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //退出
            outFn(){
                this.$router.push({
                    path: '/teacher/index'
                })
            }
        }
    }
</script>

